<template>
  <el-dialog v-model="forgetDilogVisible" title="忘记密码" width="500">
    <el-form>
      <el-form-item label="请输入您的账号" :label-width="formLabelWidth" prop="account" :rules="rules.account">
        <el-input v-model="forgetPassword.account" autocomplete="off" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="请输入您的邮箱" :label-width="formLabelWidth" prop="email" :rules="rules.email">
        <el-input v-model="forgetPassword.email" autocomplete="off" placeholder="请输入邮箱" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="forgetDilogVisible = false">取消</el-button>
        <el-button type="primary" @click="openChangePasswordDialog"> 下一步 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="changeDilogVisible" title="修改密码" width="500">
    <el-form labelPosition="top">
      <el-form-item label="请输入您的新密码" :label-width="formLabelWidth" prop="password" :rules="rules.password">
        <el-input v-model="forgetPassword.password" autocomplete="off" placeholder="请输入您的新密码" />
      </el-form-item>
      <el-form-item label="请再次输入您的新密码" :label-width="formLabelWidth" prop="confirmPassword" :rules="rules.password">
        <el-input v-model="forgetPassword.confirmPassword" autocomplete="off" placeholder="请再次输入您的新密码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeDilogVisible = false">取消</el-button>
        <el-button type="primary" @click="openChangePasswordDialog"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
const formLabelWidth = '140px'

const forgetDilogVisible = ref(false)
const changeDilogVisible = ref(false)

const forgetPassword = reactive({
  account: '',
  email: '',
  password: '',
  confirmPassword: '',
})

function openForgetDailog() {
  forgetDilogVisible.value = true
}

function openChangePasswordDialog() {
  changeDilogVisible.value = true
  forgetDilogVisible.value = false
}

const rules = {
  account: [
    { min: 6, max: 16, message: '长度在 6到 16 个字符' },
    { required: true, message: '请输入账号', trigger: 'blur' },
    { type: 'string', message: '账号必须是数字+字符' },
  ],
  email: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 10 个字符' },
    { type: 'string', message: '账号必须是数字+字符' },
  ],

  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符' },
    { type: 'string', message: '账号必须是数字+字符' },
  ],
}

defineExpose({ openForgetDailog })
</script>

<style lang="scss"></style>
